<!--
 * @Description:  Transition 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。
 * @version:
 * @Author: dh
 * @Date: 2022-02-23 19:23:07
 * @LastEditors: dh
 * @LastEditTime: 2025-10-30 15:06:16
-->
<template>
	<div>
		<button @click="v = !v">切换默认v</button>
		<button @click="fade = !fade">切换fade</button>
		<button @click="slideFade = !slideFade">切换slideFade</button>
		<button @click="bounce = !bounce">CSS 的 animation</button>
		<button @click="show = !show">继承三方动画CSS</button>

		<div style="height: 40px">
			<Transition>
				<div v-if="v">切换默认v</div>
			</Transition>
		</div>
		<div style="height: 40px">
			<Transition name="fade" mode="out-in">
				<div v-if="fade">切换fade1</div>
				<div v-else>切换fade2</div>
			</Transition>
		</div>
		<div style="height: 40px">
			<Transition name="slide-fade">
				<div v-if="slideFade">切换slideFade</div>
			</Transition>
		</div>
		<div style="height: 40px">
			<Transition name="bounce">
				<div v-if="bounce" style="text-align: center">CSS 的 animation</div>
			</Transition>
		</div>

		<div style="height: 40px">
			<!-- 假设你已经在页面中引入了 Animate.css -->
			<Transition
				name="custom-classes"
				enter-active-class="animate__animated animate__tada"
				leave-active-class="animate__animated animate__bounceOutRight"
			>
				<div v-if="show">继承三方动画CSS</div>
			</Transition>
		</div>
		<div style="height: 40px">
			<Transition>
				<div :key="count">{{ count }}</div>
			</Transition>
		</div>

		<TransitionGroupCom />
	</div>
</template>

<script setup lang="ts">
import { ref, Transition } from 'vue'
import TransitionGroupCom from './group.vue'
const v = ref(true)
const fade = ref(true)
const slideFade = ref(true)
const bounce = ref(true)
const show = ref(true)
const items = ref(5)

const count = ref(0)

setInterval(() => count.value++, 1000)
</script>

<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
/* 默认 */
.v-enter-active,
.v-leave-active {
	transition: opacity 0.5s ease;
	position: absolute;
}
.v-enter-from,
.v-leave-to {
	opacity: 0;
}

/* fade */
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.fade-enter-active,
.fade-leave-active {
	transition: all 0.25s ease-out;
}
.fade-enter-from {
	opacity: 0;
	transform: translateY(20px);
}
.fade-leave-to {
	opacity: 0;
	transform: translateY(-20px);
}

/* slide-fade */
.slide-fade-enter-active {
	transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
	transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
	transform: translateX(20px);
	opacity: 0;
}

/* CSS 的 animation */
.bounce-enter-active {
	animation: bounce-in 0.5s;
}
.bounce-leave-active {
	animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1.25);
	}
	100% {
		transform: scale(1);
	}
}
</style>
